<template>
  <div>
   
    <!-- <div class="content">
      <div class="center">
        <div class="choseTab">
          <div :class="curChose == 0 ? 'active' : ''" @click="curChose = 0">
            种植环节
          </div>
          <div :class="curChose == 1 ? 'active' : ''" @click="curChose = 1">
            加工环节
          </div>

          <div @click="toThree" class="active" style="position: absolute; right: 0;">
            场景孪生
          </div>
        </div>
        <div class="phoneinfo" v-if="curChose == 0">
          <div class="infos">
            <div class="infoText">
              <div class="mp4-p">
                <video v-if="title1 == '种子期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/1.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '萌芽期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/2.mp4" type="video/mp4" />
                </video>

                <video v-if="title1 == '开花期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/3.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '膨大期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/4.mp4" type="video/mp4" />
                </video>
                <video v-if="title1 == '采收期'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/zhongzhi/5.mp4" type="video/mp4" />
                </video>

                <div class="mp4-mask"></div>
              </div>
              <div class="infotitle">{{ title1 }}</div>
              <div class="infocontent">
                {{ desc1 }}
              </div>
            </div>
            <div class="infoTabs">
              <div v-for="(item, index) in data1" @click="select1(index)" :class="{ active: title1 == item.title }"
                class="tab">
                <div class="text-div">{{ item.title }}</div>
              </div>

            </div>
          </div>

        </div>
        <div class="phoneinfo" v-if="curChose == 1">
          <div class="infos">
            <div class="infoText">

              <div class="mp4-p">
                <video v-if="title2 == '清洗'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/1_qx.mp4" type="video/mp4" />
                </video>
                <img v-if="title2 == '烘干'" src="/mp4/2_hg.jpg" class="mp4-video" style="object-fit: cover;" />

                <video v-if="title2 == '精选'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/3_jx.mp4" type="video/mp4" />
                </video>
                <video v-if="title2 == '分选'" controls autoplay loop muted class="mp4-video">
                  <source src="/mp4/4_fx.mp4" type="video/mp4" />
                </video>
                <img v-if="title2 == '储存'" src="/mp4/5_cc.jpg" class="mp4-video" style="object-fit: cover;" />

                <div class="mp4-mask"></div>
              </div>
              <div class="infotitle">{{ title2 }}</div>
              <div class="infocontent">
                {{ desc2 }}
              </div>
            </div>
            <div class="infoTabs">
              <div v-for="(item, index) in data2" @click="select2(index)" :class="{ active: title2 == item.title }"
                class="tab">
                <div class="text-div">{{ item.title }}</div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="left">
        <LeftUp v-if="curChose == 0" class="left_up" />
        <LeftUpNew v-if="curChose == 1" class="left_up" />
        <LeftCenter v-if="curChose == 0" class="left_center" />
        <LeftCenterNew v-if="curChose == 1" class="left_center" />
        <LeftDown v-if="curChose == 0" class="left_down" />
        <LeftDownNew v-if="curChose == 1" class="left_down" />
      </div>
      <div class="right">
        <RightUp v-if="curChose == 0" class="right_up" />
        <RightUpNew v-if="curChose == 1" class="right_up" />
        <RightCenter v-if="curChose == 0" class="right_center" />
        <RightCenteNew v-if="curChose == 1" class="right_center" />
        <RightDown v-if="curChose == 0" class="right_down" />
        <RightDownNew v-if="curChose == 1" class="right_down" />
      </div>
    </div> -->
  </div>
</template>

<script setup>
import SecHeader from "../../components/SecHeader.vue";

import LeftUp from "./component/LeftUp.vue";
import LeftCenter from "./component/LeftCenter.vue";
import LeftDown from "./component/LeftDown.vue";
import RightUp from "./component/RightUp.vue";
import RightCenter from "./component/RightCenter.vue";
import RightDown from "./component/RightDown.vue";

import Center from "./component/Center.vue";

import LeftUpNew from "./component/LeftUpNew.vue";
import LeftCenterNew from "./component/LeftCenterNew.vue";
import LeftDownNew from "./component/LeftDownNew.vue";
import RightUpNew from "./component/RightUpNew.vue";
import RightCenteNew from "./component/RightCenteNew.vue";
import RightDownNew from "./component/RightDownNew.vue";

import { onActivated, onMounted, ref } from "vue";

let curChose = ref(0);
const title1 = ref('')
const desc1 = ref('')
const title2 = ref('')
const desc2 = ref('')
const data1 = ref([
  {
    title: '种子期',
    desc: '太子参种子体型小，椭圆形，长3mm，宽2mm，厚1~4mm，种皮褐红色，表面密生瘤刺状突起，呈同心圆状排列。种脐在种子的腹面基部。胚乳为显著的淀粉质，胚弯曲，位于胚乳的中央。'
  },
  {
    title: '萌芽期',
    desc: '栽种后，待气温逐渐下降到15℃，土温10℃时，种参开始缓慢发芽、发根。该阶段经过越冬，到幼苗出土为止。期间生长缓慢，主要依靠种参贮存的养分，因而要求种参肥大，基肥充足。'
  },
  {
    title: '开花期',
    desc: '翌年2月出苗后，植株生长逐步增快，并进入现蕾、开花、结果等过程。这时地上部形成分枝，植株生物量增加。地下茎逐节发根、伸长、膨大，块根数量增多，干重增加。到芒种，植株生长量达最高峰。这时是植株生长繁茂的主要时期，亦是植株吸收、制造和积累养分的关键时期。'
  },
  {
    title: '膨大期',
    desc: '块根膨大阶段 从4月中旬开始，不定根的数量、长度显著增加，并且膨大，至6月中旬进入休眠期为止，这是形成块根产量的主要时期。块根干重高峰的出现，比地上部分干重的高峰稍迟，因而加强肥水管理，促进与延长植物旺盛生长，对提高量十分重要。'
  },
  {
    title: '采收期',
    desc: '芒种以后叶片开始枯黄脱落，到夏至地上部植株枯死，新参在土开始相互散开，进入休眠越夏阶段。夏至至小暑，植株枯萎倒苗时块根已长成，应及时收获。过早或过晚采收，块根粉质少，出干率低，质量也差；延期收获，则常因雨水过多造成腐烂。'
  },
])
const data2 = ref([
  {
    title: '清洗',
    desc: '为除去泥沙、草根、树枝和非药用部位等杂质，将新鲜块根倒入洗药机内，流动水清洗直至水澄清不浑浊，检查块根应无泥沙粘附。采挖的块根应及时、迅速清洗，不应长时间浸泡。'
  },
  {
    title: '烘干',
    desc: `（1）日晒干燥：将洗净的块根摊薄晾晒，不应与地面直接接触，摊晒厚度不宜超过10 cm。适时翻动，并做好防雨、防潮、防鼠、防虫及防禽畜工作。晾晒至用手指一折即断，或检测含水量小于14.0%。
（2）机械烘干：将洗净的块根摊薄于烘盘上，摊薄厚度不宜超过10 cm，在50 ℃～60 ℃下烘至用手指一折即断，或检测含水量小于14.0%`
  },
  {
    title: '精选',
    desc: '将干燥过后的太子参倒入精选机内，利用精选机进行精选，剔除须根、母根、沙子、其他植物根及非药用部位等杂质。精选后的太子参及杂质分类收储备用。'
  },
  {
    title: '分选',
    desc: '将精选后的太子参导入分选机内，利用分选机进一步去除须根，并根据太子参大小进行分选。分选后的太子参及须根分类收储备用。'
  },
  {
    title: '储存',
    desc: '太子参应存储于阴凉干燥避光处；仓库控制温度在20 ℃以下、相对湿度65%以下；不同批次等级药材应分开存放；应符合SB/T 11094和SB/T 11095的规定。宜采用现代气调贮藏方法，应符合SB/T 11150的规定。'
  }
])

const select1 = (index) => {
  title1.value = data1.value[index].title
  desc1.value = data1.value[index].desc
}
const select2 = (index) => {
  title2.value = data2.value[index].title
  desc2.value = data2.value[index].desc
}

const toThree = () => {
  if(curChose.value == 0){
    window.open('https://hc3d.histron.cn/share.html?k=df37eedb-c4dd-4790-9f2d-75ff67da9022&t=2')
  } else {
    window.open('https://hc3d.histron.cn/share.html?k=97ecd471-7c5f-4e69-aea6-67da9da49626&t=2')
  }
}

onMounted(() => {
  select1(0)
  select2(0)
})
onActivated(() => {
  let video = document.querySelectorAll('video')
  console.log(video)
  for (let item of video) {
    item.play()
  }
})
</script>

<style scoped lang="scss">
.phoneinfo {
  display: flex;
  align-items: center;
}

.infos {
  width: vw(518);
  height: vh(568);
  background-image: url("@/assets/halfframe.png");
  background-size: 35.9722222222vw 71vh;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: start;
  justify-content: space-between;

  margin: 20px 0 0 vw(30);



  .infopis {
    width: vw(186);
    height: vh(114);
  }

  .infotitle {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: vw(14);
    line-height: vw(40);
    // color: #ffffff;
    // text-shadow: 0px 2px 5px #003f85;
    background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 63.525390625%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .infocontent {
    white-space: pre-wrap;
    width: 20vw;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: vw(11);
    color: #2cd7bc;
    line-height: vw(28);
  }

  .infoTabs {}
}

.mp4-p {
  height: 30vh;
  position: relative;
}

.mp4-video {
  width: 100%;
  height: 100%;
}

.mp4-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.infoText {
  padding: 2vw 0 0 5vw;

}

.tab {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  width: vw(85);
  height: vw(76);
  box-sizing: border-box;
  background-image: url("@/assets/polygonchose.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: vh(18) 0;
  cursor: pointer;


  font-weight: 800;
  font-size: vw(12);
  color: #fff;

}

.text-div {
  background: linear-gradient(0deg, #7ae3ff 0%, #ffffff 63.525390625%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.active {
  background-image: url("@/assets/polygon.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.phoneFrame {
  width: vw(314);
  height: vh(639);
  // width: vw(282);
  // height: vh(575);
}

.choseTab {
  position: relative;
  display: flex;
  align-items: center;
  margin: vh(30) vw(18) 0 vw(30);

  >div {
    width: vw(106);
    height: vh(31);
    line-height: vh(31);
    border-radius: vh(6);
    border: vh(1) solid #19f7ff;

    font-weight: 400;
    font-size: vh(14);
    color: #32c8a7;
    text-align: center;
    margin-right: vh(10);

    cursor: pointer;
  }

  >.active {
    border-radius: vh(6);
    color: #ffffff;
    border: vh(1) solid #57f5a1;
    background: rgba(20, 74, 88, 0.57);
  }
}
</style>

<style scoped lang="scss">
.content {
  display: flex;
  justify-content: space-between;
  /* padding: 10px; */
}

.left {
  width: 27%;
}

.left_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.left_down {
  margin: vh(10) vw(10);
  height: vh(230);
}

.center {
  /* flex-grow: 1; */
  width: 46%;
}

.right {
  width: 27%;
}

.right_up {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_center {
  margin: vh(10) vw(10);
  height: vh(230);
}

.right_down {
  margin: vh(10) vw(10);
  height: vh(230);
}
</style>